import 'dart:async';

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_news/common/entity/entitys.dart';
import 'package:flutter_news/common/utils/utils.dart';
import 'package:flutter_news/common/values/values.dart';
import 'package:flutter_news/common/widgets/app.dart';
import 'package:flutter_news/common/widgets/widgets.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';
import 'package:share_plus/share_plus.dart';
import 'package:webview_flutter/webview_flutter.dart';

@RoutePage()
class DetailsPage extends StatefulWidget {
  final NewsItem item;

  const DetailsPage({super.key, required this.item});

  @override
  State<DetailsPage> createState() => _DetailsPageState();
}

class _DetailsPageState extends State<DetailsPage> {
  //final Completer<WebViewController> _controller = Completer();

  WebViewController _controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted);

  bool _isPageFinished = false;
  double _webViewHeight = 200;

  @override
  void initState() {
    super.initState();
    _controller.addJavaScriptChannel("Invoke",
        onMessageReceived: (JavaScriptMessage message) {
      print(message.message);
      var webHeight = double.parse(message.message);
      if (webHeight != null) {
        setState(() {
          _webViewHeight = webHeight;
        });
      }
    });
    _controller.setNavigationDelegate(
      NavigationDelegate(
        onProgress: (int progress) {
          //  进度条更新
        },
        onPageStarted: (String url) {
          // 页面开始加载
          // Timer(Duration(seconds: 1), () {
          //   setState(() {
          //     _isPageFinished = true;
          //   });
          // _removeAd();
          // _getViewHeight();
          // });
        },
        onPageFinished: (String url) {
          // 页面加载完成
          _getWebViewHeight();
          setState(() {
            _isPageFinished = true;
          });
        },
        onHttpError: (HttpResponseError error) {
          // http 请求异常
        },
        onWebResourceError: (WebResourceError error) {
          // 网页资源加载失败
        },
        onNavigationRequest: (NavigationRequest request) {
          if (request.url.startsWith('https://www.youtube.com/')) {
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ),
    );

    // _controller.loadRequest(Uri.parse('$SERVER_API_URL/news/content/${widget.item.id}'));
    _controller.loadRequest(Uri.parse(
        'https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9200849215415169394%22%7D&n_type=-1&p_from=-1'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: _buildAppBar(),
        body: Stack(
          children: <Widget>[
            SingleChildScrollView(
              child: Column(
                children: <Widget>[
                  _buildPageTitle(),
                  Divider(height: 1),
                  _buildPageHeader(),
                  _buildWebView(),
                ],
              ),
            ),
            _isPageFinished == true
                ? Container()
                : Align(
                    alignment: Alignment.center,
                    //child: LoadingBouncingGrid.square(),
                    // child: LoadingAnimationWidget.twistingDots(
                    //   leftDotColor: const Color(0xFF1A1A3F),
                    //   rightDotColor: const Color(0xFFEA3799),
                    //   size: 200,
                    // ),
                    child: LoadingAnimationWidget.inkDrop(
                      color: const Color(0xFF1A1A3F),
                      size: 50,
                    ),
                  ),
          ],
        ));
  }

  // 顶部导航
  PreferredSizeWidget _buildAppBar() {
    return transparentAppBar(
      context: context,
      leading: IconButton(
        icon: Icon(
          Icons.arrow_back,
          color: AppColors.primaryText,
        ),
        onPressed: () {
          Navigator.pop(context);
        },
      ),
      actions: <Widget>[
        IconButton(
          icon: Icon(
            Icons.bookmark_border,
            color: AppColors.primaryText,
          ),
          onPressed: () {},
        ),
        IconButton(
          icon: Icon(
            Icons.share,
            color: AppColors.primaryText,
          ),
          onPressed: () {
            Share.share('${widget.item.title} ${widget.item.url}');
          },
        ),
      ],
      title: Text("title"),
    );
  }

  // 页标题
  Widget _buildPageTitle() {
    return Container(
      margin: EdgeInsets.all(duSetWidth(10)),
      child: Row(
        children: <Widget>[
          Column(
            children: <Widget>[
              // 标题
              Text(
                widget.item.category,
                style: TextStyle(
                  fontFamily: "Montserrat",
                  fontWeight: FontWeight.normal,
                  fontSize: duSetFontSize(30),
                  color: AppColors.thirdElement,
                ),
              ),
              // 作者
              Text(
                widget.item.author,
                style: TextStyle(
                  fontFamily: "Avenir",
                  fontWeight: FontWeight.normal,
                  fontSize: duSetFontSize(14),
                  color: AppColors.thirdElementText,
                ),
              ),
            ],
          ),
          Spacer(),
          // 标志
          CircleAvatar(
            //头像半径
            radius: duSetWidth(22),
            backgroundImage: AssetImage("assets/images/channel-fox.png"),
          ),
        ],
      ),
    );
  }

  // 页头部
  Widget _buildPageHeader() {
    return Container(
      margin: EdgeInsets.all(duSetWidth(10)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          // 图
          imageCached(
            widget.item.thumbnail,
            width: duSetWidth(335),
            height: duSetHeight(290),
          ),
          // 标题
          Container(
            margin: EdgeInsets.only(top: duSetHeight(10)),
            child: Text(
              widget.item.title,
              style: TextStyle(
                fontFamily: 'Montserrat',
                fontWeight: FontWeight.w600,
                color: AppColors.primaryText,
                fontSize: duSetFontSize(24),
                height: 1,
              ),
            ),
          ),
          // 一行 3 列
          Container(
            margin: EdgeInsets.only(top: duSetHeight(10)),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                // 分类
                ConstrainedBox(
                  constraints: const BoxConstraints(
                    maxWidth: 120,
                  ),
                  child: Text(
                    widget.item.category,
                    style: TextStyle(
                      fontFamily: 'Avenir',
                      fontWeight: FontWeight.normal,
                      color: AppColors.secondaryElementText,
                      fontSize: duSetFontSize(14),
                      height: 1,
                    ),
                    overflow: TextOverflow.clip,
                    maxLines: 1,
                  ),
                ),
                // 添加时间
                Container(
                  width: duSetWidth(15),
                ),
                ConstrainedBox(
                  constraints: const BoxConstraints(
                    maxWidth: 120,
                  ),
                  child: Text(
                    '• ${duTimeLineFormat(widget.item.addtime)}',
                    style: TextStyle(
                      fontFamily: 'Avenir',
                      fontWeight: FontWeight.normal,
                      color: AppColors.thirdElementText,
                      fontSize: duSetFontSize(14),
                      height: 1,
                    ),
                    overflow: TextOverflow.clip,
                    maxLines: 1,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // web内容
  Widget _buildWebView() {
    return Container(
      height: _webViewHeight,
      child: WebViewWidget(controller: _controller),
    );
  }

  // 删除广告
  _removeWebViewAd() async {
    await (await _controller)?.runJavaScript('''
        try {
          function removeElement(elementName){
            let _element = document.getElementById(elementName);
            if(!_element) {
              _element = document.querySelector(elementName);
            }
            if(!_element) {
              return;
            }
            let _parentElement = _element.parentNode;
            if(_parentElement){
                _parentElement.removeChild(_element);
            }
          }

          removeElement('module-engadget-deeplink-top-ad');
          removeElement('module-engadget-deeplink-streams');
          removeElement('footer');
        } catch{}
        ''');
  }

  // 获取页面高度
  _getWebViewHeight() async {
    await (await _controller)?.runJavaScript('''
        try {
          // Invoke.postMessage([document.body.clientHeight,document.documentElement.clientHeight,document.documentElement.scrollHeight]);
          let scrollHeight = document.documentElement.scrollHeight;
          if (scrollHeight) {
            Invoke.postMessage(scrollHeight);
          }
        } catch {}
        ''');
  }

  // 获取web浏览器像素密度
  _getWebViewDevicePixelRatio() async {
    await (await _controller)?.runJavaScript('''
        try {
          Invoke.postMessage(window.devicePixelRatio);
        } catch {}
        ''');
  }
}
